import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { models, AIModel } from '@/lib/models';
import { ChevronsUpDown, Bot } from 'lucide-react';

export function ModelSelector() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedModel, setSelectedModel] = useState<AIModel>(models[2]); // Default to GPT-4o mini

  return (
    <div>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={isOpen}
            className="w-auto h-8 px-3 justify-between bg-white/10 hover:bg-white/20 text-slate-300 hover:text-white border-slate-700 rounded-lg"
          >
            <div className="flex items-center gap-2">
              {selectedModel.providerLogo || <Bot className="w-4 h-4" />}
              <span className="text-sm font-medium">{selectedModel.name}</span>
            </div>
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </DialogTrigger>
        <DialogContent className="p-0 bg-slate-900/80 backdrop-blur-xl border-slate-700 text-white max-w-2xl">
            <DialogTitle className="p-4 text-center text-lg font-semibold border-b border-slate-700">
              Select a Model
            </DialogTitle>
          <div className="p-2">
            <p className="text-center py-16">Model list and search will be implemented here.</p>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
